<template>
  <div style="width: 100%">
    <!-- top_pic区域 -->
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <!-- 在此位置加上两个控件：登录？注册、欢迎：张三？退出登录 -->
        <el-row
          type="flex"
          justify="end"
          class="LoginAndRegister"
          v-show="!isLogin"
        >
          <el-link type="primary" href="/#/Login" style="margin-right: 2em"
            >登录</el-link
          ><el-link type="primary" href="/#/Register">注册</el-link>
        </el-row>
        <el-row
          type="flex"
          justify="end"
          class="WelcomeAndLogout"
          v-show="isLogin"
        >
          欢迎&nbsp;<el-link
            type="primary"
            href="/#/User"
            style="margin-right: 1em"
            >{{ userName }}</el-link
          ><el-link type="primary" @click="UserLogout">注销</el-link>
        </el-row>
        <!-- <TopPic></TopPic> -->
      </el-col>
    </el-row>
    <!-- top_title区域 -->
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <topTitle></topTitle>
      </el-col>
    </el-row>
    <!-- nav区域 -->
    <el-row type="flex" justify="center">
      <el-col :span="24" style="background-color: rgb(191, 64, 56)">
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <topnav></topnav>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 在主要内容区域应该是放一个router-view -->
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <router-view></router-view>
      </el-col>
    </el-row>

    <!-- bottomfooter区域 -->
    <el-row type="flex" justify="center">
      <el-col
        :span="24"
        style="border-top: 2px solid rgb(191, 64, 56); margin-top: 30px"
      >
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <bottomfooter style="margin-top: 10px"></bottomfooter>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopPic from "./topPic.vue";
import topTitle from "./topTitle.vue";
import topnav from "./topnav.vue";
import bottomfooter from "./bottomfooter.vue";

export default {
  components: {
    TopPic,
    topTitle,
    topnav,
    bottomfooter,
  },
  // data: {
  //   isLogin: false,
  // },
  computed: {
    userName: function () {
      return this.$store.state.userNickName;
    },
    isLogin:function(){
      return this.$store.state.id?true:false
    }
  },
  mounted() {
    // this.isLogin = window.sessionStorage.getItem("token") ? true : false;
    // console.log(this.isLogin);
  },
  methods: {
    async UserLogout() {
      await this.$store.dispatch("Logout");
      //  执行路由跳转
      this.$router.push("/Index");
    },
  },
};
</script>

